extends /default.pug

block scripts
  script(src='node_modules/chart.js/dist/Chart.min.js')
  script(src='node_modules/@coreui/coreui-plugin-chartjs-custom-tooltips/dist/js/custom-tooltips.min.js')
  script(src='js/widgets.js')

block view
  .animated.fadeIn
    .row
      .col-sm-6.col-lg-3
        .card.text-white.bg-primary
          .card-body.pb-0
            .btn-group.float-right
              button.btn.btn-transparent.dropdown-toggle.p-0(type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
                i.icon-settings
              .dropdown-menu.dropdown-menu-right
                a.dropdown-item(href='#') Action
                a.dropdown-item(href='#') Another action
                a.dropdown-item(href='#') Something else here
            .text-value 9.823
            div Members online
          .chart-wrapper.mt-3.mx-3(style='height:70px;')
            canvas#card-chart1.chart(height='70')
      // /.col
      .col-sm-6.col-lg-3
        .card.text-white.bg-info
          .card-body.pb-0
            button.btn.btn-transparent.p-0.float-right(type='button')
              i.icon-location-pin
            .text-value 9.823
            div Members online
          .chart-wrapper.mt-3.mx-3(style='height:70px;')
            canvas#card-chart2.chart(height='70')
      // /.col
      .col-sm-6.col-lg-3
        .card.text-white.bg-warning
          .card-body.pb-0
            .btn-group.float-right
              button.btn.btn-transparent.dropdown-toggle.p-0(type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
                i.icon-settings
              .dropdown-menu.dropdown-menu-right
                a.dropdown-item(href='#') Action
                a.dropdown-item(href='#') Another action
                a.dropdown-item(href='#') Something else here
            .text-value 9.823
            div Members online
          .chart-wrapper.mt-3(style='height:70px;')
            canvas#card-chart3.chart(height='70')
      // /.col
      .col-sm-6.col-lg-3
        .card.text-white.bg-danger
          .card-body.pb-0
            .btn-group.float-right
              button.btn.btn-transparent.dropdown-toggle.p-0(type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
                i.icon-settings
              .dropdown-menu.dropdown-menu-right
                a.dropdown-item(href='#') Action
                a.dropdown-item(href='#') Another action
                a.dropdown-item(href='#') Something else here
            .text-value 9.823
            div Members online
          .chart-wrapper.mt-3.mx-3(style='height:70px;')
            canvas#card-chart4.chart(height='70')
      // /.col
    // /.row
    .row
      .col-sm-6.col-lg-3
        .card
          .card-body
            .text-value 89.9%
            div Lorem ipsum...
            .progress.progress-xs.my-2
              .progress-bar.bg-success(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
            small.text-muted Lorem ipsum dolor sit amet enim.
      // /.col
      .col-sm-6.col-lg-3
        .card
          .card-body
            .text-value 12.124
            div Lorem ipsum...
            .progress.progress-xs.my-2
              .progress-bar.bg-info(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
            small.text-muted Lorem ipsum dolor sit amet enim.
      // /.col
      .col-sm-6.col-lg-3
        .card
          .card-body
            .text-value $98.111,00
            div Lorem ipsum...
            .progress.progress-xs.my-2
              .progress-bar.bg-warning(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
            small.text-muted Lorem ipsum dolor sit amet enim.
      // /.col
      .col-sm-6.col-lg-3
        .card
          .card-body
            .text-value 2 TB
            div Lorem ipsum...
            .progress.progress-xs.my-2
              .progress-bar.bg-danger(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
            small.text-muted Lorem ipsum dolor sit amet enim.
      // /.col
    // /.row
    .row
      .col-sm-6.col-lg-3
        .card.text-white.bg-primary
          .card-body
            .text-value 89.9%
            div Lorem ipsum...
            .progress.progress-white.progress-xs.my-2
              .progress-bar(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
            small.text-muted Lorem ipsum dolor sit amet enim.
      // /.col
      .col-sm-6.col-lg-3
        .card.text-white.bg-warning
          .card-body
            .text-value 12.124
            div Lorem ipsum...
            .progress.progress-white.progress-xs.my-2
              .progress-bar(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
            small.text-muted Lorem ipsum dolor sit amet enim.
      // /.col
      .col-sm-6.col-lg-3
        .card.text-white.bg-danger
          .card-body
            .text-value $98.111,00
            div Lorem ipsum...
            .progress.progress-white.progress-xs.my-2
              .progress-bar(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
            small.text-muted Lorem ipsum dolor sit amet enim.
      // /.col
      .col-sm-6.col-lg-3
        .card.text-white.bg-info
          .card-body
            .text-value 2 TB
            div Lorem ipsum...
            .progress.progress-white.progress-xs.my-2
              .progress-bar(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
            small.text-muted Lorem ipsum dolor sit amet enim.
      // /.col
    // /.row
    .row
      .col-md-2.col-sm-4
        .card
          .card-body.text-center
            .text-muted.small.text-uppercase.font-weight-bold Title
            .text-value-lg.py-3 1,123
            .chart-wrapper.mx-auto(style='height:40px;width:80px')
              canvas#sparkline-chart-1.chart.chart-bar(height='40', width='80')
      // /.col
      .col-md-2.col-sm-4
        .card
          .card-body.text-center
            .text-muted.small.text-uppercase.font-weight-bold Title
            .text-value-lg.py-3 1,123
            .chart-wrapper.mx-auto(style='height:40px;width:80px')
              canvas#sparkline-chart-2.chart.chart-bar(height='40', width='80')
      // /.col
      .col-md-2.col-sm-4
        .card
          .card-body.text-center
            .text-muted.small.text-uppercase.font-weight-bold Title
            .text-value-lg.py-3 1,123
            .chart-wrapper.mx-auto(style='height:40px;width:80px')
              canvas#sparkline-chart-3.chart.chart-bar(height='40', width='80')
      // /.col
      .col-md-2.col-sm-4
        .card
          .card-body.text-center
            .text-muted.small.text-uppercase.font-weight-bold Title
            .text-value-lg.py-3 1,123
            .chart-wrapper.mx-auto(style='height:40px;width:80px')
              canvas#sparkline-chart-4.chart.chart-line(height='40', width='100')
      // /.col
      .col-md-2.col-sm-4
        .card
          .card-body.text-center
            .text-muted.small.text-uppercase.font-weight-bold Title
            .text-value-lg.py-3 1,123
            .chart-wrapper.mx-auto(style='height:40px;width:80px')
              canvas#sparkline-chart-5.chart.chart-line(height='40', width='100')
      // /.col
      .col-md-2.col-sm-4
        .card
          .card-body.text-center
            .text-muted.small.text-uppercase.font-weight-bold Title
            .text-value-lg.py-3 1,123
            .chart-wrapper.mx-auto(style='height:40px;width:80px')
              canvas#sparkline-chart-6.chart.chart-line(height='40', width='100')
      // /.col
    // /.row
    .row
      .col-6.col-lg-3
        .card
          .card-body.p-3.d-flex.align-items-center
            i.fa.fa-cogs.bg-primary.p-3.font-2xl.mr-3
            div
              .text-value-sm.text-primary $1.999,50
              .text-muted.text-uppercase.font-weight-bold.small Income
      // /.col
      .col-6.col-lg-3
        .card
          .card-body.p-3.d-flex.align-items-center
            i.fa.fa-laptop.bg-info.p-3.font-2xl.mr-3
            div
              .text-value-sm.text-info $1.999,50
              .text-muted.text-uppercase.font-weight-bold.small Income
      // /.col
      .col-6.col-lg-3
        .card
          .card-body.p-3.d-flex.align-items-center
            i.fa.fa-moon-o.bg-warning.p-3.font-2xl.mr-3
            div
              .text-value-sm.text-warning $1.999,50
              .text-muted.text-uppercase.font-weight-bold.small Income
      // /.col
      .col-6.col-lg-3
        .card
          .card-body.p-3.d-flex.align-items-center
            i.fa.fa-bell.bg-danger.p-3.font-2xl.mr-3
            div
              .text-value-sm.text-danger $1.999,50
              .text-muted.text-uppercase.font-weight-bold.small Income
      // /.col
      .col-6.col-lg-3
        .card
          .card-body.p-3.d-flex.align-items-center
            i.fa.fa-cogs.bg-primary.p-3.font-2xl.mr-3
            div
              .text-value-sm.text-primary $1.999,50
              .text-muted.text-uppercase.font-weight-bold.small Income
          .card-footer.px-3.py-2
            a.btn-block.text-muted.d-flex.justify-content-between.align-items-center(href='#')
              span.small.font-weight-bold View More
              i.fa.fa-angle-right
      // /.col
      .col-6.col-lg-3
        .card
          .card-body.p-3.d-flex.align-items-center
            i.fa.fa-laptop.bg-info.p-3.font-2xl.mr-3
            div
              .text-value-sm.text-info $1.999,50
              .text-muted.text-uppercase.font-weight-bold.small Income
          .card-footer.px-3.py-2
            a.btn-block.text-muted.d-flex.justify-content-between.align-items-center(href='#')
              span.small.font-weight-bold View More
              i.fa.fa-angle-right
      // /.col
      .col-6.col-lg-3
        .card
          .card-body.p-3.d-flex.align-items-center
            i.fa.fa-moon-o.bg-warning.p-3.font-2xl.mr-3
            div
              .text-value-sm.text-warning $1.999,50
              .text-muted.text-uppercase.font-weight-bold.small Income
          .card-footer.px-3.py-2
            a.btn-block.text-muted.d-flex.justify-content-between.align-items-center(href='#')
              span.small.font-weight-bold View More
              i.fa.fa-angle-right
      // /.col
      .col-6.col-lg-3
        .card
          .card-body.p-3.d-flex.align-items-center
            i.fa.fa-bell.bg-danger.p-3.font-2xl.mr-3
            div
              .text-value-sm.text-danger $1.999,50
              .text-muted.text-uppercase.font-weight-bold.small Income
          .card-footer.px-3.py-2
            a.btn-block.text-muted.d-flex.justify-content-between.align-items-center(href='#')
              span.small.font-weight-bold View More
              i.fa.fa-angle-right
      // /.col
    // /.row
    .row
      .col-6.col-lg-3
        .card
          .card-body.p-0.d-flex.align-items-center
            i.fa.fa-cogs.bg-primary.p-4.font-2xl.mr-3
            div
              .text-value-sm.text-primary $1.999,50
              .text-muted.text-uppercase.font-weight-bold.small Income
      // /.col
      .col-6.col-lg-3
        .card
          .card-body.p-0.d-flex.align-items-center
            i.fa.fa-laptop.bg-info.p-4.font-2xl.mr-3
            div
              .text-value-sm.text-info $1.999,50
              .text-muted.text-uppercase.font-weight-bold.small Income
      // /.col
      .col-6.col-lg-3
        .card
          .card-body.p-0.d-flex.align-items-center
            i.fa.fa-moon-o.bg-warning.p-4.font-2xl.mr-3
            div
              .text-value-sm.text-warning $1.999,50
              .text-muted.text-uppercase.font-weight-bold.small Income
      // /.col
      .col-6.col-lg-3
        .card
          .card-body.p-0.d-flex.align-items-center
            i.fa.fa-bell.bg-danger.p-4.font-2xl.mr-3
            div
              .text-value-sm.text-danger $1.999,50
              .text-muted.text-uppercase.font-weight-bold.small Income
      // /.col
      .col-6.col-lg-3
        .card
          .card-body.p-0.d-flex.align-items-center
            i.fa.fa-cogs.bg-primary.p-4.px-5.font-2xl.mr-3
            div
              .text-value-sm.text-primary $1.999,50
              .text-muted.text-uppercase.font-weight-bold.small Income
      // /.col
      .col-6.col-lg-3
        .card
          .card-body.p-0.d-flex.align-items-center
            i.fa.fa-laptop.bg-info.p-4.px-5.font-2xl.mr-3
            div
              .text-value-sm.text-info $1.999,50
              .text-muted.text-uppercase.font-weight-bold.small Income
      // /.col
      .col-6.col-lg-3
        .card
          .card-body.p-0.d-flex.align-items-center
            i.fa.fa-moon-o.bg-warning.p-4.px-5.font-2xl.mr-3
            div
              .text-value-sm.text-warning $1.999,50
              .text-muted.text-uppercase.font-weight-bold.small Income
      // /.col
      .col-6.col-lg-3
        .card
          .card-body.p-0.d-flex.align-items-center
            i.fa.fa-bell.bg-danger.p-4.px-5.font-2xl.mr-3
            div
              .text-value-sm.text-danger $1.999,50
              .text-muted.text-uppercase.font-weight-bold.small Income
      // /.col
    // /.row
    .row
      .col-sm-6.col-lg-3
        .brand-card
          .brand-card-header.bg-facebook
            i.fa.fa-facebook
            .chart-wrapper
              canvas#social-box-chart-1(height='90')
          .brand-card-body
            div
              .text-value 89k
              .text-uppercase.text-muted.small friends
            div
              .text-value 459
              .text-uppercase.text-muted.small feeds
      // /.col
      .col-sm-6.col-lg-3
        .brand-card
          .brand-card-header.bg-twitter
            i.fa.fa-twitter
            .chart-wrapper
              canvas#social-box-chart-2(height='90')
          .brand-card-body
            div
              .text-value 973k
              .text-uppercase.text-muted.small followers
            div
              .text-value 1.792
              .text-uppercase.text-muted.small tweets
      // /.col
      .col-sm-6.col-lg-3
        .brand-card
          .brand-card-header.bg-linkedin
            i.fa.fa-linkedin
            .chart-wrapper
              canvas#social-box-chart-3(height='90')
          .brand-card-body
            div
              .text-value 500+
              .text-uppercase.text-muted.small contacts
            div
              .text-value 292
              .text-uppercase.text-muted.small feeds
      // /.col
      .col-sm-6.col-lg-3
        .brand-card
          .brand-card-header.bg-google-plus
            i.fa.fa-google-plus
            .chart-wrapper
              canvas#social-box-chart-4(height='90')
          .brand-card-body
            div
              .text-value 894
              .text-uppercase.text-muted.small followers
            div
              .text-value 92
              .text-uppercase.text-muted.small circles
      // /.col
    // /.row
    .card-group.mb-4
      .card
        .card-body
          .h1.text-muted.text-right.mb-4
            i.icon-people
          .text-value 87.500
          small.text-muted.text-uppercase.font-weight-bold Visitors
          .progress.progress-xs.mt-3.mb-0
            .progress-bar.bg-info(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
      .card
        .card-body
          .h1.text-muted.text-right.mb-4
            i.icon-user-follow
          .text-value 385
          small.text-muted.text-uppercase.font-weight-bold New Clients
          .progress.progress-xs.mt-3.mb-0
            .progress-bar.bg-success(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
      .card
        .card-body
          .h1.text-muted.text-right.mb-4
            i.icon-basket-loaded
          .text-value 1238
          small.text-muted.text-uppercase.font-weight-bold Products sold
          .progress.progress-xs.mt-3.mb-0
            .progress-bar.bg-warning(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
      .card
        .card-body
          .h1.text-muted.text-right.mb-4
            i.icon-pie-chart
          .text-value 28%
          small.text-muted.text-uppercase.font-weight-bold Returning Visitors
          .progress.progress-xs.mt-3.mb-0
            .progress-bar(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
      .card
        .card-body
          .h1.text-muted.text-right.mb-4
            i.icon-speedometer
          .text-value 5:34:11
          small.text-muted.text-uppercase.font-weight-bold Avg. Time
          .progress.progress-xs.mt-3.mb-0
            .progress-bar.bg-danger(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
    .row
      .col-sm-6.col-md-2
        .card
          .card-body
            .h1.text-muted.text-right.mb-4
              i.icon-people
            .text-value 87.500
            small.text-muted.text-uppercase.font-weight-bold Visitors
            .progress.progress-xs.mt-3.mb-0
              .progress-bar.bg-info(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
      // /.col
      .col-sm-6.col-md-2
        .card
          .card-body
            .h1.text-muted.text-right.mb-4
              i.icon-user-follow
            .text-value 385
            small.text-muted.text-uppercase.font-weight-bold New Clients
            .progress.progress-xs.mt-3.mb-0
              .progress-bar.bg-success(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
      // /.col
      .col-sm-6.col-md-2
        .card
          .card-body
            .h1.text-muted.text-right.mb-4
              i.icon-basket-loaded
            .text-value 1238
            small.text-muted.text-uppercase.font-weight-bold Products sold
            .progress.progress-xs.mt-3.mb-0
              .progress-bar.bg-warning(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
      // /.col
      .col-sm-6.col-md-2
        .card
          .card-body
            .h1.text-muted.text-right.mb-4
              i.icon-pie-chart
            .text-value 28%
            small.text-muted.text-uppercase.font-weight-bold Returning Visitors
            .progress.progress-xs.mt-3.mb-0
              .progress-bar(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
      // /.col
      .col-sm-6.col-md-2
        .card
          .card-body
            .h1.text-muted.text-right.mb-4
              i.icon-speedometer
            .text-value 5:34:11
            small.text-muted.text-uppercase.font-weight-bold Avg. Time
            .progress.progress-xs.mt-3.mb-0
              .progress-bar.bg-danger(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
      // /.col
      .col-sm-6.col-md-2
        .card
          .card-body
            .h1.text-muted.text-right.mb-4
              i.icon-speech
            .text-value 972
            small.text-muted.text-uppercase.font-weight-bold Comments
            .progress.progress-xs.mt-3.mb-0
              .progress-bar.bg-info(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
      // /.col
    // /.row
    .row
      .col-sm-6.col-md-2
        .card.text-white.bg-info
          .card-body
            .h1.text-muted.text-right.mb-4
              i.icon-people
            .text-value 87.500
            small.text-muted.text-uppercase.font-weight-bold Visitors
            .progress.progress-white.progress-xs.mt-3
              .progress-bar(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
      // /.col
      .col-sm-6.col-md-2
        .card.text-white.bg-success
          .card-body
            .h1.text-muted.text-right.mb-4
              i.icon-user-follow
            .text-value 385
            small.text-muted.text-uppercase.font-weight-bold New Clients
            .progress.progress-white.progress-xs.mt-3
              .progress-bar(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
      // /.col
      .col-sm-6.col-md-2
        .card.text-white.bg-warning
          .card-body
            .h1.text-muted.text-right.mb-4
              i.icon-basket-loaded
            .text-value 1238
            small.text-muted.text-uppercase.font-weight-bold Products sold
            .progress.progress-white.progress-xs.mt-3
              .progress-bar(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
      // /.col
      .col-sm-6.col-md-2
        .card.text-white.bg-primary
          .card-body
            .h1.text-muted.text-right.mb-4
              i.icon-pie-chart
            .text-value 28%
            small.text-muted.text-uppercase.font-weight-bold Returning Visitors
            .progress.progress-white.progress-xs.mt-3
              .progress-bar(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
      // /.col
      .col-sm-6.col-md-2
        .card.text-white.bg-danger
          .card-body
            .h1.text-muted.text-right.mb-4
              i.icon-speedometer
            .text-value 5:34:11
            small.text-muted.text-uppercase.font-weight-bold Avg. Time
            .progress.progress-white.progress-xs.mt-3
              .progress-bar(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
      // /.col
      .col-sm-6.col-md-2
        .card.text-white.bg-info
          .card-body
            .h1.text-muted.text-right.mb-4
              i.icon-speech
            .text-value 972
            small.text-muted.text-uppercase.font-weight-bold Comments
            .progress.progress-white.progress-xs.mt-3
              .progress-bar(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
      // /.col
    // /.row
